<template>
  <!-- 小模块公共组件 -->
  <div class="Mould-Box">
    <!-- 图表标题 -->
    <div class="Mould-Box-mintitle">
      <div class="charttitle">
        {{ chartTitle }}
      </div>
      <div class="title-box">
        <div class="box-item" v-for="(item,index) in text" :key="index">
          <div class="title-box" :style="{'background-color':color[index]}"></div>
          <div class="title-name">{{item}}</div>
        </div>
      </div>
    </div>
    <!-- 图表 -->
    <div class="Mould-Box-chartBox">
      <CoalCuttingChart :color="color" :data="datas" :text="text"/>
    </div>
  </div>
</template>

<script>
import CoalCuttingChart from '@/components/chart/line/CoalCuttingChart.vue';
export default {
  name: 'MouldBobV4',

  components: {
    CoalCuttingChart
  },
  props: {
    // 模块数据
    datas: {
      type: Array,
      required: true
    },
    text: {
      type: Array,
      required: true
    },
    color: {
      type: Array,
      default: () => []
    },
    chartTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>

<style lang='scss' scoped>
.Mould-Box{
    width: 20.625rem;
    &-mintitle{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.625rem;
        .charttitle{
          font-size: 0.75rem;
          color: $light2Grey;
          margin-right: 0.3125rem;
        }
        .title-box{
          display: flex;
          align-items: center;
          .box-item{
            display: flex;
            align-items: center;
            .title-box{
              margin-right: .3125rem;
              width: 1.25rem;
              height: .3125rem;
            }
            .title-name{
              font-size: 0.75rem;
              color: $light2Grey;
              margin-right: .625rem;
            }
            // .title-name:last-child{
            //   margin-right: 0;
            // }
          }
        }
    }
    &-chartBox{
      width: 100%;
      height: 10.3125rem;
    }
}
</style>
